<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style type="text/css">
    h1{
        color: white;
        float: left;
    }
    b{
        font-size: 20px;
        margin-left: 30px;
        color: rgba(255, 138, 36, 0.7)
    }
    table {
        text-align: center;
        width: 480px;
        padding: 0 auto;
        margin: 0 auto;
        border-collapse:collapse;
        background-color: rgba(255, 138, 36, 0.7);
        border-radius: 20px;

    }
    td {
        padding: 8px;
        border-bottom: solid 1px white;
    }

    html{
        height: 100%;
    }
    body{
        margin: 0 auto;
        padding: 0 auto;
        background-repeat: no-repeat;

        background-position: center center;

        background-color: #00BDDC;


        background-size: 100% 100%;
        position: relative;
    }
    .content{
        padding: 0 auto;
        margin: 0 auto;
        width: 100%;
        /*border: solid 1px black;*/
        position: absolute;
        z-index: 100;
        top: 140px;
        background-color: rgba(248, 255, 244, 0.4);
        clear: both;
    }
    .loading{
        display: none;
    }

    .sure{color: red;}
</style>
<body>
<h1>儿童滑雪场会员管理系统<b>会员注册</b></h1>
<div class="content">
    <form action="reg.php" method="post" enctype="multipart/form-data">
        <table align="center" style="border-collapse: collapse" border="1" bordercolor="#999999">
            <tr>
                <td align="right">用户名</td>
                <td align="left"><input name="u1" id="username">
                    <span class="sure"> *</span><img src="loading.gif" height="50" class="hide">
                    <span id="usernameTips"></span>
                </td>
            </tr>
            <tr>
                <td align="right">密码</td>
                <td align="left"><input type="password" name="pw" id="pw"><span class="sure"> *</span></td>
            </tr>

            <tr>
                <td>请输入验证码:</td>
                <td><input type="text" name="code" id="code">
                    <img src="code.php" onclick="this.src='code.php? ' + new Date().getTime()"</td>
            </tr>
            <tr>
                <td align="right"><input type="submit" name="submit" value="注册" onclick="jQueryCheck();"></td>
                <td align="left">
                    <input type="reset" name="reset" value="重置">
                    <input type="button" value="返回" onclick="javascript:location.href='index.php'">
                </td>
            </tr>
        </table>
    </form>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script>
        $(function () {
            $("#username").blur(function () {
                $.ajax({
                    url:"checkUsername.php", //URL地址，用于处理异步查询
                    data:{
                        username : $("#username").val()
                    },
                    type:"POST",
                    dataType:"JSON",
                    timeout:2000,
                    success:function (data) {
                        $(".hide").hide();
                        if(data.error == 1){ //说明用户名被占用
                            $("#usernameTips").html("<span style='color:red'>此用户名已被占用</span>");
                            //将焦点移动到用户名区域
                            $("#username").focus();
                        }
                        else{
                            $("#usernameTips").html("<span style='color:darkgreen'>此用户名已可以使用</span>");
                        }
                    },
                    beforeSend:function () {
                        $(".hide").show();
                    },
                    error:function (d1,d2,d3) {
                        $(".hide").hide();
                        alert('查询用户名是否被占用出错！');
                    }
                })
            });
        });
        function jQueryCheck() {
            var username,pw,errLog = 0,errMsg = "",code;
            username = $("#username").val();
            pw = $("#pw").val();
            code = $("#code").val();
            if(username == ""){
                errLog = 1;
                errMsg += "用户名必须填写！\n";
            }
            if(pw == ""){
                errLog = 1;
                errMsg += "密码必须填写！\n";
            }
            if(code == "")
            {
                errLog =1;
                errMsg +="请输入验证码!";
            }
            if(errLog == 1){ //说明有些项目填写不合格
                alert(errMsg);  //弹出错误提示
            }
            else{  //说明数据填写合格
                //用异步方式完成注册
                //先读取用户选择的爱好
                var fav_array=new Array();
                $('input[name="fav"]:checked').each(function(){
                    fav_array.push($(this).val());//向数组中添加元素
                });
                var fav=fav_array.join(',');//将数组元素连接起来以构建一个字符串
                $.ajax({
                    url:"postReg.php",
                    data:{
                        username:username,
                        pw:pw,

                        code:$("#code").val()
                    },
                    dataType:"JSON",
                    type:"POST",
                    success:function (d) {
                        if(d.error == 1){ //说明有错误
                            alert(d.errMsg);
                        }
                        else{  //说明注册成功
                            alert("注册成功");
                            location.href = 'in.php';
                        }
                    }
                })
            }
        }
        function check() {
            var username,pw;
            username = document.getElementById("username").value.trim();
            if(username == ""){ //说明用户名未填写
                alert("用户名必须填写！");
                return false;
            }
            pw = document.getElementById("pw").value.trim();
            if(pw == ""){ //说明用户名未填写
                alert("密码必须填写！");
                return false;
            }
        }
    </script>
</body>
</html>